<template>
    <div class="movie">
        <my-head title="电影" :back="false"></my-head>
        <div class="banner">
            <div class="city" v-if="city" @click="gotocity()">
                {{city.name}} 
                <van-icon name="arrow-down" class="mr5" color="#fff" size="16" />
            </div>
            <van-swipe 
            class="my-swipe" 
            :autoplay="3000" 
            indicator-color="white">
                <van-swipe-item v-for="(l,i) in banners" :key='i'>
                    <img :src="l.imgUrl" class="mimg"  alt="">
                </van-swipe-item>
            </van-swipe>
        </div>

        <div class="nav">
            <van-tabs v-model="type" sticky color="#ff5f16" title-active-color="#ff5f16">
                <van-tab title="正在热映" name="1" >
                    <load-more :refresh="getFilmsshua" :getMoreData="getMoreData">
                        <HList :list="films" :type="type"> </HList>
                    </load-more>
                    
                </van-tab>
                <van-tab title="即将上映" name="2" >
                    <load-more :refresh="getFilmsshua" :getMoreData="getMoreData">
                        <HList :list="films" :type="type"> </HList>
                    </load-more>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>


<script>
export default {
    data(){
         return {
            banners:[],
            type:"1",   // 1 正在热映  2 即将上映  
            pageNum:1,
            pageSize:10, 
            films:[],
            total:0
        }
    },
    watch:{
        type(v){
            console.log(v)
            this.pageNum = 1;
            this.total = 0 ;
            this.getFilms(this.pageNum,this.pageSize,v)
        }
    },
    methods:{
        gotocity(){
            this.$router.push({name:'city',query:{name:this.city.name}})
        },
        // 获取下一页的数据 
        async getMoreData(hasLoad,dataEnd){
            this.pageNum++;
            if(this.pageNum>Math.ceil(this.total /  this.pageSize)){
                // 数据全部请求了 
                dataEnd()
            }else{
                // 加载第二页数据
                let res = await this.$ajax.getMaizuo({
                    cityId: this.city.cityId,   // 城市Id 
                    pageNum:this.pageNum,     // 分页 页码 
                    pageSize:this.pageSize,  // 每页多少条数据
                    type: this.type  // 1 正在热映  2 即将上映  
                },{
                    'X-Host': 'mall.film-ticket.film.list',
                })
                this.films = this.films.concat(res.data.films); // 拼接第二页数据 
                this.total = res.data.total ;
                hasLoad()
            }
        },
        async getBanners(){
            // 所有的卖座数据都要带请求头 headers
            let res = await this.$ajax.getMaizuo({
                cityId:this.city.cityId //vuex   420100 
            },{
                'X-Host': 'mall.cfg.film-float.banner',
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"164016685720306605375489","bc":"420100"}'  // 轮播图需要
            })
            this.banners.push(res.data)  // 数组 
        },
         async getFilmsshua(){
            let res = await this.$ajax.getMaizuo({
                cityId: this.city.cityId,   // 城市Id 
                pageNum:this.pageNum,     // 分页 页码 
                pageSize:this.pageSize,  // 每页多少条数据
                type: this.type  // 1 正在热映  2 即将上映  
            },{
                'X-Host': 'mall.film-ticket.film.list',
            })
            this.films = res.data.films;
            this.total = res.data.total ;
        },
        async getFilms(pageNum=1,pageSize=10,type='1'){
            let res = await this.$ajax.getMaizuo({
                cityId: this.city.cityId,   // 城市Id 
                pageNum,     // 分页 页码 
                pageSize,  // 每页多少条数据
                type: type // 1 正在热映  2 即将上映  
            },{
                'X-Host': 'mall.film-ticket.film.list',
            })
            this.films = res.data.films;
            this.total = res.data.total ;
        }
    },
    mounted(){
        console.log("mounted")
        // city 有值才能去请求数据
        if(this.city){
            this.getFilms()
            this.getBanners()
        }else{
            this.$dialog.alert({
                title: '选择城市',
                message: '请去定位选择你的所在城市',
            }).then(() => {
            // on close
                this.$router.push({name:'city'})
            });
        }
    }
}
</script>


<style lang="scss" scoped>
.movie{
    .banner{
        width:100%;
        height:200px;
        position: relative;
        .city{
            position: absolute;
            top:20px;
            left:20px;
            padding:0 15px;
            height:30px;
            line-height: 30px;
            background: rgba(0,0,0,0.5);
            color:#fff;
            font-size: 14px;
            text-align: center;
            border-radius: 20px;
            border:1px solid #ccc;
            z-index:99;
            display: flex;
            justify-content: center;
            align-items: center;
            .mr5{
                margin-left: 3px;
            }
        }
        .my-swipe{
            width:100%;
            height:200px;
            .mimg{
                width:100%;
                height:200px;
            }
        }
    }
    
}
</style>